<template>
  <div>
    <div class="top">
      <el-button
        type="primary"
        class="el-icon-plus add"
        size="mini"
        @click="materialLeave"
        >出库</el-button
      >
      <el-form
        ref="form"
        :model="formData"
        label-width="80px"
        inline
        size="mini"
      >
        <el-form-item>
          <el-input
            v-model="formData.materialName"
            placeholder="请输入物料名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formData.materialType"
            placeholder="请选择物料类型"
            clearable
          >
            <el-option
              :label="item.label"
              :value="item.label"
              v-for="(item, index) in materialType"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询时间">
          <el-date-picker
            v-model="time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="searchTableData">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border>
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        align="center"
        v-for="(item, index) in materialLeaveTableHeard"
        :key="index"
      >
      </el-table-column>
      <!-- 无数据 -->
      <template slot="empty">
        <div class="noData" v-show="tableData.length === 0">
          <img src="@/assets/images/noData.png" />
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
    <Pagination :total="total" @pagination="handlePage" :page.sync="formData.pageNum"></Pagination>

    <el-dialog title="新增出库" :visible.sync="materialDialog" width="40%">
      <div>
        <el-row>
          <el-form
            ref="materialForm"
            label-width="80px"
            :model="materialForm"
            size="mini"
            :rules="materialRules"
          >
            <el-col :span="12">
              <el-form-item label="物料名称" prop="materialId">
                <el-select
                  v-model="materialForm.materialId"
                  placeholder="请选择物料"
                  @change="selectMaterialName"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="item in materialList"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格" prop="specification">
                <el-input
                  :disabled="true"
                  v-model="materialForm.specification"
                  placeholder="请输入物料规格"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出库类型" prop="deliverType">
                <el-select
                  v-model="materialForm.deliverType"
                  placeholder="请选择出库类型"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in leaveType"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出库数量" prop="deliverNumber">
                <el-input
                  v-model="materialForm.deliverNumber"
                  placeholder="请输出库数量"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出库日期" prop="deliverDate">
                <el-date-picker
                  style="width: 160px"
                  v-model="materialForm.deliverDate"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptionsForm"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="领用人" prop="collectingUser">
                <el-select
                  v-model="materialForm.collectingUser"
                  placeholder="请选择领用人"
                >
                  <el-option
                    :label="item.nickName"
                    :value="item.id"
                    v-for="item in collectingUserList"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div slot="footer">
        <el-button @click="materialDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { materialType, materialLeaveTableHeard, leaveType } from "./constant/index.js";
import { materialList } from "@/api/material-management/material-list";
import {userList} from "@/api/system-setup/user-management";
import {
  deliverList,
  inventoryDeliver,
} from "@/api/material-management/material-leave.js";
export default {
  data() {
    const deliverNumber = (rule, value, callback) => {
      if (value > 0) {
        callback()
      } else {
        return callback(new Error('入库数量必须大于0'))
      }
    };
    return {
      time: [],
      total:0,
      materialDialog: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pickerOptionsForm: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      formData: {
        materialName: "",
        materialType: "",
        deliverTimeEnd: "",
        deliverTimeStart: "",
        pageNum: 1,
        pageSize: 10,
      },
      materialForm: {
        materialId: null,
        specification: '',
        deliverType:'',
        deliverNumber: '',
        deliverDate:'',
        collectingUser:null
      },
      materialRules: {
        materialId: [
          { required: true, message: "请选择物料", trigger: "change" },
        ],
        deliverType: [
          { required: true, message: "请选择物料类型", trigger: "change" },
        ],
        deliverNumber: [
          { required: true, validator:  deliverNumber, trigger: "blur" },
        ],
        deliverDate: [{ required: true, message: "请选择日期", trigger: "change" }],
        collectingUser:[ { required: true, message: "请选择领用人", trigger: "change" }]
      },
      tableData: [],
      materialType,
      materialLeaveTableHeard,
      leaveType,
      collectingUserList: [],
      materialList: [],
      initForm:{}
    };
  },
  created() {
    this.initForm = this.$cloneDeep(this.materialForm)
    this.getcollectingUser()
    this.getMaterialList()
    this.getTableData();
  },
  methods: {
    //物料
    async getMaterialList() {
      let res = await materialList({
        expiryReminders: "",
        id: null,
        name: "",
        pageNum: 0,
        pageSize: 10,
        shelfLife: "",
        specification: "",
        type: "",
        unitOfMeasure: "",
        unitPrice: 0,
      });
      if (res.code == 200) {
        this.materialList = res.data.list;
      }
    },
    //领用人
    async getcollectingUser() {
      let res = await userList( {
        username: "",
        phoneNumber: "",
        status: "",
        pageNum: 0,
        pageSize: 999,
      });
      if (res.code == 200) {
        this.collectingUserList = res.data.userList.records;
      }
    },
    async getTableData() {
      let res = await deliverList(this.formData);
      if (res.code == 200) {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
      }
    },
    //选择物料时自动获取规格
    selectMaterialName(event) {
      let selectMaterial = this.materialList.filter((item) => {
        return item.id === event;
      });
      this.materialForm.specification = selectMaterial[0].specification;
    },
    materialLeave() {
      this.materialForm = this.$cloneDeep(this.initForm)
      this.materialDialog = true;
      this.$nextTick(() => {
        this.$refs.materialForm.clearValidate()
      })
    },
    searchTableData() {
      this.formData.pageNum = 1
      this.getTableData()
    },
    //分页器
    handlePage(val) {
      this.formData.pageNum = val.page;
      this.formData.pageSize = val.limit;
      this.getTableData();
    },
    confirm() {
      this.$refs.materialForm.validate(async (valid) => {
        if (valid) {
          let res = await inventoryDeliver(this.materialForm);
          if (res.code == 200) {
            this.materialDialog = false;
            this.getTableData();
          }
        } else {
          return false;
        }
      });
    },
  },
  watch: {
    time(newValue) {
      if (newValue) {
        this.formData.deliverTimeStart = newValue[0];
        this.formData.deliverTimeEnd = newValue[1];
      } else {
        this.formData.deliverTimeStart = "";
        this.formData.deliverTimeEnd = "";
      }
    },
  },
};
</script>

<style></style>
